<template>
  <div
    data-h-cxk-nav
    class="nav"
  >
    <nav data-h-cxk-nav>
      <ul data-h-cxk-nav>
        <li
          data-h-cxk-nav
          @click="getactived(1)"
          class="li_2"
          v-if="actived===1"
        > <span data-h-cxk-nav>热点首页</span>
          <div
            data-h-cxk-nav
            class="box"
          ></div>
        </li>
        <li
          data-h-cxk-nav
          @click="getactived(1)"
          class="li_1"
          v-else
        ><span data-h-cxk-nav>热点首页</span></li>

        <li
          data-h-cxk-nav
          @click="getactived(2)"
          class="li_2"
          v-if="actived===2"
        ><span data-h-cxk-nav>新闻资讯</span>
          <div
            class="box"
            data-h-cxk-nav
          ></div>
        </li>
        <li
          data-h-cxk-nav
          @click="getactived(2)"
          class="li_1"
          v-else
        ><span data-h-cxk-nav>新闻资讯</span></li>

        <li
          data-h-cxk-nav
          @click="getactived(3)"
          class="li_2"
          v-if="actived===3"
        ><span data-h-cxk-nav>预告片</span>
          <div
            data-h-cxk-nav
            class="box"
          ></div>
        </li>
        <li
          data-h-cxk-nav
          @click="getactived(3)"
          class="li_1"
          v-else
        ><span data-h-cxk-nav>预告片</span></li>

        <li
          data-h-cxk-nav
          @click="getactived(4)"
          class="li_2"
          v-if="actived===4"
        ><span data-h-cxk-nav>热门音乐</span>
          <div class="box"></div>
        </li>
        <li
          data-h-cxk-nav
          @click="getactived(4)"
          class="li_1"
          v-else
        ><span data-h-cxk-nav>热门音乐</span></li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  props: ["nowactived"],
  components: {},
  data: () => ({
    actived: 1,
  }),
  created() {
    this.actived = this.nowactived;
  },
  methods: {
    getactived(index) {
      this.actived = index;
      this.$router.push(`/hotspot/tab=${index}`);
    },
  },
};
</script>

<style lang="less" >
* {
  margin: 0;
  padding: 0;
}
.nav[data-h-cxk-nav] {
  width: 100%;
  height: 60px;
  background-color: #47464a;
  padding: 0px;
  margin-top: 80px;
  nav[data-h-cxk-nav] {
    width: 560px;
    height: 60px;
    color: #47464a;
    margin: 0 auto;
    ul[data-h-cxk-nav] {
      width: 560px;
      height: 60px;
      padding: 0px;
      // margin-left: -40px;
      .li_1[data-h-cxk-nav] {
        width: auto;
        height: 60px;
        float: left;
        color: #999;
        // #ef4238
        list-style: none;
        line-height: 60px;
        position: relative;
      }
      .li_2[data-h-cxk-nav] {
        width: auto;
        height: 60px;
        float: left;
        color: #ef4238;
        // #ef4238
        list-style: none;
        line-height: 60px;
        position: relative;
        .box[data-h-cxk-nav] {
          width: 0px;
          height: 0px;
          border: 10px solid rgba(0, 0, 0, 0);
          border-bottom: 8px solid #ffffff;
          bottom: 0px;
          left: 50%;
          transform: translate(-50%, 0);
          position: absolute;
        }
      }
      span[data-h-cxk-nav] {
        padding: 0 40px;
      }
    }
  }
}
</style>